<template>
    <div>
        <pt-table :data="data" url="permissions" ref="tableRef"></pt-table>
        <pt-form type="dialog" url="permissions" :rules="formData" ref="formRef"></pt-form>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'

const formRef = ref()
const tableRef = ref()

const plus = (row: any) => {
    formRef.value.action.reset()
    formRef.value.action.reload({ parent_id: row['id'] })
    formRef.value.action.show()
}

onMounted(() => {
    tableRef.value.action.setFormRef(formRef)
    tableRef.value.action.on('plus', plus)
})

const data = {
    header: {
        buttons: ['add', 'del', 'refresh', 'extend'],
        search: false,
    },
    page: false,
    column: [
        { type: 'selection' },
        { label: '权限名称', prop: 'name' },
        { label: '权限标题', prop: 'title' },
        { label: '路由地址', prop: 'route' },
        { label: '组件地址', prop: 'component' },
        {
            label: '类型',
            prop: 'type',
            width: '70',
            render: 'tag',
            renderExtend: [
                { value: 'dir', text: '目录', type: 'success' },
                { value: 'nav', text: '导航' },
                { value: 'btn', text: '按钮', type: 'warning' },
                { value: 'link', text: '链接', type: 'danger' },
            ],
        },
        { label: '状态', prop: 'status', render: 'switches', width: '80' },
        { label: '导航', prop: 'is_nav', render: 'switches', width: '80' },
        {
            label: '操作',
            width: '140',
            fixed: 'right',
            buttons: [{ icon: 'plus', event: 'plus' }, 'edit', 'del'],
        },
    ],
}

const formData = {
    title: '权限管理',
    row: 20,
    col: 12,
    rules: [
        { field: 'name', label: '权限名称', required: true },
        { field: 'title', label: '权限标题', required: true },
        {
            field: 'parent_id',
            type: 'select',
            label: '上级目录',
            required: true,
            value: 0,
            options: {
                url: '/permissions-lists',
            },
            prop: {
                clearable: true,
                filterable: true,
            },
        },
        {
            field: 'type',
            type: 'radio',
            label: '类型',
            required: true,
            value: 'dir',
            options: [
                { label: '目录', value: 'dir' },
                { label: '导航', value: 'nav' },
                { label: '按钮', value: 'btn' },
                { label: '链接', value: 'link' },
            ],
            condition: [
                {
                    value: 'nav',
                    hasField: ['route', 'component', 'controller'],
                },
            ],
        },
        { field: 'icon', type: 'select-icon', label: 'ICON' },
        { field: 'route', label: '路由地址', required: true },
        { field: 'component', label: '组件地址', required: true },
        { field: 'controller', label: '控制器方法' },
        {
            field: 'is_nav',
            type: 'radio',
            label: '是否显示',
            options: [
                { label: '是', value: 1 },
                { label: '否', value: 0 },
            ],
            value: 1,
        },
        {
            field: 'weight',
            type: 'number',
            label: '权重',
            value: 0,
            prop: {
                min: 0,
                max: 255,
            },
        },
    ],
}
</script>
